{% extends "base.html" %}

{% block title %}服务器管理 - 镜像传输系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8 mx-auto">
        <div class="card">
            <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
                <h4 class="mb-0"><i class="bi bi-server"></i> 服务器管理</h4>
                <button class="btn btn-light btn-sm" data-bs-toggle="modal" data-bs-target="#addServerModal">
                    <i class="bi bi-plus-circle"></i> 添加服务器
                </button>
            </div>
            <div class="card-body">
                {% if servers %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="table-dark">
                            <tr>
                                <th>名称</th>
                                <th>主机地址</th>
                                <th>端口</th>
                                <th>用户名</th>
                                <th>认证方式</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for server in servers %}
                            <tr>
                                <td><strong>{{ server.name }}</strong></td>
                                <td><code>{{ server.host }}</code></td>
                                <td>{{ server.port }}</td>
                                <td>{{ server.username }}</td>
                                <td>
                                    {% if server.password %}
                                        <span class="badge bg-warning">密码认证</span>
                                    {% elif server.ssh_key_path %}
                                        <span class="badge bg-info">密钥认证</span>
                                    {% else %}
                                        <span class="badge bg-secondary">未知</span>
                                    {% endif %}
                                </td>
                                <td>{{ server.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                                <td>
                                    <button class="btn btn-sm btn-primary test-server-btn" data-server-id="{{ server.id }}">
                                        <i class="bi bi-plug"></i> 测试
                                    </button>
                                    <button class="btn btn-sm btn-danger delete-server-btn" data-server-id="{{ server.id }}">
                                        <i class="bi bi-trash"></i> 删除
                                    </button>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-5">
                    <i class="bi bi-server display-1 text-muted"></i>
                    <h5 class="text-muted">暂无服务器配置</h5>
                    <p class="text-muted">添加您的第一台目标服务器以开始传输</p>
                    <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addServerModal">
                        <i class="bi bi-plus-circle"></i> 添加服务器
                    </button>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 添加服务器模态框 -->
<div class="modal fade" id="addServerModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加服务器</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="addServerForm" action="{{ url_for('manage_servers') }}" method="POST" data-reload="true">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">服务器名称 *</label>
                        <input type="text" class="form-control" name="name" required 
                               placeholder="例如: 生产服务器-01">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">主机地址 *</label>
                        <input type="text" class="form-control" name="host" required 
                               placeholder="例如: 192.168.1.100 或 example.com">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">SSH端口 *</label>
                        <input type="number" class="form-control" name="port" value="22" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">用户名 *</label>
                        <input type="text" class="form-control" name="username" required 
                               placeholder="例如: root">
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">认证方式</label>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="auth_type" 
                                   id="authPassword" value="password" checked>
                            <label class="form-check-label" for="authPassword">密码认证</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="auth_type" 
                                   id="authKey" value="key">
                            <label class="form-check-label" for="authKey">SSH密钥认证</label>
                        </div>
                    </div>
                    
                    <div id="passwordAuth" class="auth-section">
                        <div class="mb-3">
                            <label class="form-label">密码</label>
                            <input type="password" class="form-control" name="password" 
                                   placeholder="SSH登录密码">
                        </div>
                    </div>
                    
                    <div id="keyAuth" class="auth-section" style="display: none;">
                        <div class="mb-3">
                            <label class="form-label">SSH私钥路径</label>
                            <input type="text" class="form-control" name="ssh_key_path" 
                                   placeholder="例如: /home/user/.ssh/id_rsa">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-success">添加服务器</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}

<!-- 在页面底部添加调试信息区域 -->
<div class="mt-3" id="debugInfo" style="display: none;">
    <div class="card">
        <div class="card-header">
            <h6>调试信息</h6>
        </div>
        <div class="card-body">
            <pre id="debugContent"></pre>
        </div>
    </div>
</div>

<script>
// 添加调试模式开关
document.addEventListener('keydown', function(e) {
    // Ctrl+Shift+D 切换调试模式
    if (e.ctrlKey && e.shiftKey && e.key === 'D') {
        const debugInfo = document.getElementById('debugInfo');
        debugInfo.style.display = debugInfo.style.display === 'none' ? 'block' : 'none';
    }
});

// 显示调试信息
function showDebugInfo(data) {
    const debugContent = document.getElementById('debugContent');
    debugContent.textContent = JSON.stringify(data, null, 2);
}
</script>

<script>

// 页面加载完成后初始化认证方式显示
document.addEventListener('DOMContentLoaded', function() {
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    // 初始显示密码认证区域
    document.getElementById('passwordAuth').style.display = 'block';
    document.getElementById('keyAuth').style.display = 'none';
});
</script>
{% endblock %}
